import { ComUtils } from "@/utils/Com";
import { Editor } from "grapesjs";

export const ContainerComp = (edt: Editor) => {
    edt.DomComponents.addType('container', {
        isComponent: (el) => {
            return el.dataset?.container !== undefined
        },
        model: {
            defaults: {
                tagName: 'div',
                droppable: true,
                draggable: '*',
                attributes: {
                    'data-container': true,
                },
                components: `
                    <div>container</div>
                    `,
                style: {
                    border: '1px solid #0e0',
                    padding: '10px'
                },
                traits:[
                    { type: 'string', name: 'id' },
                ]
            },
        }
    })
};

export const RowComp = (edt: Editor) => {
    edt.DomComponents.addType('row', {
        isComponent: (el) => {
            return el.dataset?.row !== undefined
        },
        model: {
            defaults: {
                tagName: 'div',
                droppable: true,
                draggable: '*',
                attributes: {
                    'data-row': true,
                },
                components: `
                    <div>row1</div>
                    <div>row2</div>
                    <div>row3</div>
                    <div>row4</div>`,
                style: {
                    border: '1px solid #0e0',
                    padding: '10px',
                    display: 'flex',
                    'flex-wrap': 'wrap',
                    'flex-direction': 'column'
                },
                traits:[
                    { type: 'string', name: 'id' },
                ]
            },
        }
    })
};

export const ColComp = (edt: Editor) => {
    edt.DomComponents.addType('col', {
        isComponent: (el) => {
            return el.dataset?.col !== undefined
        },
        model: {
            defaults: {
                tagName: 'div',
                droppable: true,
                draggable: '*',
                attributes: {
                    'data-col': true,
                },
                components: `
                    <div>col1</div>
                    <div>col2</div>
                    <div>col3</div>
                    <div>col4</div>`,
                style: {
                    border: '1px solid #0e0',
                    padding: '10px',
                    display: 'flex',
                    'flex-wrap': 'wrap',

                },
                traits:[
                    { type: 'string', name: 'id' },
                ]
            },
        }
    })
};

export const CanvasComp = (edt: Editor) => {
    edt.DomComponents.addType('canvas', {
        isComponent: (el) => el.tagName === 'CANVAS',
        model: {
            defaults: {
                tagName: 'canvas',
                droppable: true,
                draggable: '*',
                attributes: {
                    width: 300,
                    height: 150
                },
                traits: [
                    { type: 'string', name: 'id' },
                    { type: 'number', name: 'width' },
                    { type: 'number', name: 'height' },
                ],
            },
        }
    })
};

export const TextAreaComp = (edt: Editor) => {
    edt.DomComponents.addType('textarea', {
        isComponent: (el) => el.tagName === 'TEXTAREA',
        model: {
            defaults: {
                tagName: 'textarea',
                droppable: true,
                draggable: '*',
                attributes: {
                    textContent: 'textarea',
                    'data-script-dog-func': '',
                    'data-script-dog-args': '',
                    title:''
                },
                traits: [
                    { type: 'string', name: 'id' },
                    { type: 'checkbox', name: 'disabled' },
                    { type: 'number', name: 'rows' },
                    { type: 'string', name: 'data-script-dog-func' },
                    { type: 'string', name: 'data-script-dog-args' },
                    { type: 'string', name: 'title' },
                    { type: 'string', name: 'value' },
                    { type: 'string', name: 'placeholder' },
                ],
            },
        }
    })
};

export const InputComp = (edt: Editor) => {
    edt.DomComponents.addType('input', {
        isComponent: (el) => el.tagName === 'INPUT',
        model: {
            defaults: {
                tagName: 'input',
                droppable: true,
                draggable: '*',
                attributes: {
                    type: 'text',
                    value: '123',
                    'data-script-dog-func': '',
                    'data-script-dog-args': '',
                    title:''
                },
                traits: [
                    { type: 'string', name: 'id' },
                    { type: 'checkbox', name: 'disabled' },
                    {
                        type: 'select', name: 'type',
                        options: [
                            { id: 'text', text: 'text' },
                            { id: 'password', text: 'password', },
                            { id: 'button', text: 'button' },
                            { id: 'checkbox', text: 'checkbox' },
                            { id: 'color', text: 'color' },
                            { id: 'email', text: 'email' },
                            { id: 'file', text: 'file' },
                            { id: 'month', text: 'month' },
                            { id: 'number', text: 'number' },
                            { id: 'radio', text: 'radio' },
                            { id: 'range', text: 'range' },
                        ]
                    },
                    { type: 'string', name: 'data-script-dog-func' },
                    { type: 'string', name: 'data-script-dog-args' },
                    { type: 'string', name: 'title' },
                    { type: 'string', name: 'value' },
                    { type: 'string', name: 'placeholder' },
                ],
            },
        }
    })
};

export const LinkComp = (edt: Editor) => {
    edt.DomComponents.addType('link', {
        isComponent: (el) => el.tagName === 'A',
        model: {
            defaults: {
                tagName: 'a',
                droppable: true,
                draggable: '*',
                attributes: {
                    href: '',
                    target: '_blank'
                },
                components: `my link`,
                traits: [
                    { type: 'string', name: 'id' },
                    { type: 'string', name: 'href' },
                    { type: 'select', name: 'target', options: [{ id: '_blank', text: '_blank' }, { id: '_self', text: '_self' }] },
                ],
            },
        }
    })
};

export const OptionComp = (edt: Editor) => {
    edt.DomComponents.addType('option', {
        isComponent: (el) => el.tagName === 'option',
        model: {
            defaults: {
                tagName: 'option',
                droppable: true,
                draggable: 'select',
                components: `
                        option1
                    `,
                traits: [
                    { type: 'checkbox', name: 'disabled' },
                    { type: 'checkbox', name: 'selected' },
                    { type: 'string', name: 'value' },
                    { type: 'string', name: 'label' },
                ],
            },
        }
    })
};

export const SelectComp = (edt: Editor) => {
    edt.DomComponents.addType('select', {
        isComponent: (el) => el.tagName === 'select',
        model: {
            defaults: {
                tagName: 'select',
                droppable: true,
                draggable: '*',
                attributes: {
                    'data-script-dog-func': '',
                    'data-script-dog-args': '',
                    title: ''
                },
                traits: [
                    { type: 'string', name: 'id' },
                    { type: 'string', name: 'data-script-dog-func' },
                    { type: 'string', name: 'data-script-dog-args' },
                    { type: 'string', name: 'title' },
                ],
            },
        }
    })
};

export const ButtonComp = (edt: Editor) => {
    edt.DomComponents.addType('button', {
        isComponent: (el) => el.tagName === 'BUTTON',
        model: {
            defaults: {
                tagName: 'button',
                droppable: true,
                draggable: '*',
                components: `
                        <span>button</span>
                    `,
                attributes: {
                    'data-script-dog-func': '',
                    'data-script-dog-args': '',
                    title: ''
                },
                traits: [
                    { type: 'string', name: 'id' },
                    { type: 'string', name: 'data-script-dog-func' },
                    { type: 'string', name: 'data-script-dog-args' },
                    { type: 'string', name: 'title' },
                    { type: 'checkbox', name: 'disabled' },
                ],
            },
        }
    })
};

export const ImageComp = (edt: Editor) => {
    edt.DomComponents.addType('myImage', {
        isComponent: (el) => el.tagName === 'IMG',
        model: {
            defaults: {
                tagName: 'img',
                droppable: true,
                draggable: '*',
                attributes: {
                    'data-script-dog-func': '',
                    'data-script-dog-args': '',
                    title: '',
                    src: ComUtils.getResourceUrl('/logo.png')
                },
                traits: [
                    { type: 'string', name: 'id' },
                    { type: 'string', name: 'data-script-dog-func' },
                    { type: 'string', name: 'data-script-dog-args' },
                    { type: 'string', name: 'src' },
                    { type: 'string', name: 'title' },
                ],
            },
            updated(property, value, prevValue) {
                console.log('Local hook: model.updated', 'property', property, 'value', value, 'prevValue', prevValue);
            },
        }
    })
};


export const extendedStyleManager = (editor: Editor) => {
    editor.StyleManager.addSector('advanced', {
        name: ComUtils.tr('advanced'),
        open: true,
        properties: [
            {
                name: 'overflow-x',
                type: 'select',
                default: 'auto',
                options: [
                    { id: 'unset', label: 'unset' },
                    { id: 'hidden', label: 'hidden' },
                    { id: 'auto', label: 'auto' },
                    { id: 'visible', label: 'visible' },
                    { id: 'scroll', label: 'scroll' },
                ],
            },
            {
                name: 'overflow-y',
                type: 'select',
                default: 'auto',
                options: [
                    { id: 'unset', label: 'unset' },
                    { id: 'hidden', label: 'hidden' },
                    { id: 'auto', label: 'auto' },
                    { id: 'visible', label: 'visible' },
                    { id: 'scroll', label: 'scroll' },
                ],
            },
            {
                name: 'text-wrap-mode',
                type: 'select',
                default: 'wrap',
                options: [
                    { id: 'nowrap', label: 'nowrap' },
                    { id: 'wrap', label: 'wrap' },
                    { id: 'unset', label: 'unset' }
                ],
            },
            {
                name: 'text-overflow',
                type: 'select',
                default: 'unset',
                options: [
                    { id: 'clip', label: 'clip' },
                    { id: 'ellipsis', label: 'ellipsis' },
                    { id: 'unset', label: 'unset' }
                ],
            },
            {
                name: 'min-width',
                type: 'number',
                default: '',
                unit: 'px',
                units: ['px', '%', 'rem', 'em', 'vw', 'vh'],
            },
            {
                name: 'max-width',
                type: 'number',
                default: '',
                unit: 'px',
                units: ['px', '%', 'rem', 'em', 'vw', 'vh'],
            },
            {
                name: 'min-height',
                type: 'number',
                default: '',
                unit: 'px',
                units: ['px', '%', 'rem', 'em', 'vw', 'vh'],
            },
            {
                name: 'max-height',
                type: 'number',
                default: '',
                unit: 'px',
                units: ['px', '%', 'rem', 'em', 'vw', 'vh'],
            },
            {
                name: 'aspect-ratio',
                type: 'string',
                default: 'auto',
            },
            {
                name: 'z-index',
                type: 'number',
                default: '0',
            },
            {
                name: 'cursor',
                type: 'select',
                default: 'default',
                options: [
                    { id: 'default', label: 'default' },
                    { id: 'pointer', label: 'pointer' },
                    { id: 'grab', label: 'grab' },
                    { id: 'grabbing', label: 'grabbing' },
                    { id: 'move', label: 'move' },
                    { id: 'text', label: 'text' },
                    { id: 'wait', label: 'wait' },
                    { id: 'help', label: 'help' },
                    { id: 'crosshair', label: 'crosshair' },
                    { id: 'progress', label: 'progress' },
                    { id: 'all-scroll', label: 'all-scroll' },
                    { id: 'col-resize', label: 'col-resize' },
                    { id: 'row-resize', label: 'row-resize' },
                    { id: 'n-resize', label: 'n-resize' },
                    { id: 'e-resize', label: 'e-resize' },
                    { id: 's-resize', label: 's-resize' },
                    { id: 'w-resize', label: 'w-resize' },
                    { id: 'ne-resize', label: 'ne-resize' },
                    { id: 'nw-resize', label: 'nw-resize' },
                    { id: 'se-resize', label: 'se-resize' },
                    { id: 'sw-resize', label: 'sw-resize' },
                    { id: 'not-allowed', label: 'not-allowed' },
                ],
            },
            {
                name: 'object-fit',
                type: 'select',
                default: 'unset',
                options: [
                    { id: 'contain', label: 'contain' },
                    { id: 'cover', label: 'cover' },
                    { id: 'fill', label: 'fill' },
                    { id: 'none', label: 'none' },
                    { id: 'unset', label: 'unset' },
                ],
            },
        ]
    }, { at: 0 });
}